<template lang="html">
  <section class="wrapper">
    <div class="box">
      <canvas class="canvas" id="ball" width="600" height="300"></canvas>
    </div>
  </section>
</template>

<script>
export default {
  methods: {
    // 简单画圆
    init1 () {
      let canvas = document.getElementById('ball')
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d')
        let ball = {
          x: 100,
          y: 100,
          radius: 25,
          color: '#2CA4BF',
          draw: function () {
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true)
            ctx.closePath()
            ctx.fillStyle = this.color
            ctx.fill()
          }
        }
        ball.draw()
      }
    },
    // 动画
    init2 () {
      let canvas = document.getElementById('ball')
      if (canvas.getContext) {
        let raf
        let ctx = canvas.getContext('2d')
        let ball = {
          x: 100,
          y: 100,
          vx: 5,
          vy: 2,
          radius: 25,
          color: '#2CA4BF',
          draw() {
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true)
            ctx.closePath()
            ctx.fillStyle = this.color
            ctx.fill()
          }
        }
        function draw () {
          ctx.clearRect(0, 0, canvas.width, canvas.height)
          ball.draw();
          // 碰撞
          if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
            ball.vy = -ball.vy
          }
          if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
            ball.vx = -ball.vx
          }
          ball.x += ball.vx
          ball.y += ball.vy
          raf = window.requestAnimationFrame(draw)
        }

        canvas.addEventListener('mouseover', function (e) {
          raf = window.requestAnimationFrame(draw)
        })

        canvas.addEventListener('mouseout', function (e) {
          window.cancelAnimationFrame(raf)
        })

        ball.draw()
      }
    },
    // 拖尾+鼠标事件
    init3 () {
      let canvas = document.getElementById('ball')
      if (canvas.getContext) {
        let ctx = canvas.getContext('2d')
        let raf
        let running = false
        let ball = {
          x: 100,
          y: 100,
          vx: 5,
          vy: 1,
          radius: 25,
          color: '#2CA4BF',
          draw: function () {
            ctx.beginPath()
            ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, true)
            ctx.closePath()
            ctx.fillStyle = this.color
            ctx.fill()
          }
        }

        function clear () {
          ctx.fillStyle = 'rgba(255, 255, 255, .3)'
          ctx.fillRect(0, 0, canvas.width, canvas.height)
        }

        function draw () {
          clear()
          ball.draw()
          ball.x += ball.vx
          ball.y += ball.vy

          if (ball.y + ball.vy > canvas.height || ball.y + ball.vy < 0) {
            ball.vy = -ball.vy
          }
          if (ball.x + ball.vx > canvas.width || ball.x + ball.vx < 0) {
            ball.vx = -ball.vx
          }
          raf = window.requestAnimationFrame(draw)
        }

        canvas.addEventListener('mousemove', function (e) {
          if (!running) {
            clear()
            ball.x = e.clientX
            ball.y = e.clientY
            ball.draw()
          }
        })

        canvas.addEventListener('mouseout', function (e) {
          window.cancelAnimationFrame(raf)
          running = false
        })

        canvas.addEventListener('click', function (e) {
          if (!running) {
            raf = window.requestAnimationFrame(draw)
            running = true
          }
        })

        ball.draw()
      }
    },
  },
  mounted () {
    this.init3()
  }
}
</script>

<style lang="scss" scoped>
  .box {
    margin-top: 30px;
    text-align: center;
  }
  .canvas {
    border: 1px solid #ccc;
    margin: 0 auto;
  }
</style>
